<template>
  <div>
    <!-- 头部 -->
    <div id="header">
      <div class="header_left">
       <van-icon name="location"  size="20" color="#48486a"/>
        <div>定 位</div>
      </div>
      <div class="search">
        <input type="text" placeholder="请输入内容" />
      </div>
      <div class="header_right">
        <van-icon name="certificate" size="20" />
        <div>签 到</div>
      </div>
    </div>
    <!-- 轮播 -->
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item class="swiperitem">
             <img src="../../assets/images/banner.png" alt="">
        </van-swipe-item>
        <van-swipe-item class="swiperitem">
            <img src="../../assets/images/banner2.png" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航 -->
    <div class="nav">
       <div class="left">
          <van-icon name="arrow-left"  size="20" color="#d0d0d0"/>
       </div>
       <div class="middle">
          <ul>
            <li>全部</li>
            <li>logo</li>
            <li>插画</li>
            <li>摄影</li>
          </ul>
       </div>
       <div class="right" >
            <van-icon name="arrow" size="20" color="#d0d0d0" /> 
       </div>
    </div>
    <!-- 图片列表 -->
    <div class="photoList">
         <div class="photoItem">
             <div class="image">
               <img src="../../assets/images/3国潮.png" alt="">
             </div>
             <div class="text1">
                国潮京剧花旦古风传统元素
             </div>
             <p class="p1 too">千小图</p>
             <p class="too">--</p>
             <span class="too">手绘元素</span>
         </div>
         <div class="photoItem">
             <div class="image">
               <img src="../../assets/images/3国潮.png" alt="">
             </div>
             <div class="text1">
                国潮京剧花旦古风传统元素
             </div>
              <p class="p1 too">千小图</p>
             <p class="too">--</p>
             <span class="too">手绘元素</span>
         </div>
         
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
#header {
  width: 674px;
  height: 56px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  .search {
    width: 542px;
    height: 56px;
    padding: 0px 10px;
    border-radius: 50px;
    input {
      width: 542px;
      height: 56px;
      border-radius: 10px;
      border: 0px solid transparent;
      text-indent: 15px;
    }
  }
  .header_left {
    text-align: center;
  }
  .header_right {
    text-align: center;
  }
}
.swiper{
  width: 745px;
  height: 271px;
  margin: 23px auto;
  .my-swipe{
    width: 100%;
    height: 100%;
    .swiperitem{
      width: 100%;
      height: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }  
}
.nav{
  width: 688px;
  height: 50px;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .middle{
    width: 500px;
    ul{
      list-style: none;
      display: flex;
      justify-content: space-between;
      li{
        font-size: 25px;
      }
    }
    
  }
}
.photoList{
  width: 724px;
  height: 344px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  .photoItem{
    width: 310px;
    height: 374px;
    border: 1px solid rgb(219, 218, 218);
    .image{
      width: 100%;
      height: 205px;
      img{
      width: 100%;
      height: 100%;
    }
    }
    .text1{
      font-size: 10px;
      padding-left: 10px;
    }
    .p1{
      margin-top:30px;
    }
    .too{
      padding-left: 8px;
    }
  }
}
</style>